let total = 0

let query = {
  pagenum: 1, // 第几页数据
  pagesize: 3, // 每页几条
  cate_id: '', // 分类
  state: '', // 状态 已发布/ 草稿
}

// 一 . 获取文章列表
function load() {
  console.log('query:', query)

  axios
    .get('http://api-breakingnews-web.itheima.net/my/article/list', {
      headers: {
        Authorization: localStorage.getItem('token'),
      },
      params: query,
    })
    .then(res => {
      console.log('获取文章列表:', res.data)

      total = res.data.total

      //0. 清空
      $('.layui-table tbody').empty()

      //1. 获取数据
      let list = res.data.data

      //2. 遍历 list
      list.forEach(item => {
        let theTr = `<tr>
                    <td>${item.title}</td>
                    <td>${item.cate_name}</td>
                    <td>${moment(item.pub_date).format('YYYY-MM-DD hh:mm:ss a')}</td>
                    <td>${item.state}</td>
                    <th>
                    <button myid="${
                      item.Id
                    }" type="button" class="layui-btn layui-btn-xs layui-btn-danger del">删除</button>
                    </th>
                </tr>`
        $('.layui-table tbody').append(theTr)
      })

      // 3. 分页
      setPage()
    })
}

load()

// 二 . 筛选表单
// 展示分类
function loadCateList() {
  axios
    .get('http://api-breakingnews-web.itheima.net/my/article/cates', {
      headers: {
        Authorization: localStorage.getItem('token'),
      },
    })
    .then(res => {
      console.log('分类', res.data.data)

      // 遍历
      let arr = res.data.data

      arr.forEach(obj => {
        var theOption = `<option value="${obj.Id}" lay-verify="cate">${obj.name}</option>`
        $('select[name=category]').append(theOption)
        // 让layui刷新一下form表单
      })
      // 更新
      layui.form.render('select', 'category')
      // 分类数据回来了, 再绑定筛选表单的submit 事件
      //   点击筛选按钮
      $('.search').on('submit', e => {
        e.preventDefault()

        query.cate_id = $('select[name=category]').val()
        query.state = $('select[name=state]').val()

        load()
      })
    })
}

loadCateList()

// 三. 分页
function setPage() {
  var laypage = layui.laypage
  //执行一个laypage实例
  laypage.render({
    elem: 'page',
    count: total, //数据总数，从服务端得到
    limit: query.pagesize,
    curr: query.pagenum,
    jump: function (obj, first) {
      //obj包含了当前分页的所有参数，比如：
      console.log(obj.curr) //得到当前页，以便向服务端请求对应页的数据。

      //首次不执行
      if (!first) {
        //do something

        query.pagenum = obj.curr
        query.pagesize = obj.limit
        load()
      }
    },
  })
}

// 四. 删除
$('.layui-table tbody').on('click', '.del', e => {
  console.log('删除 ', e.target.getAttribute('myid'))
  let myid = e.target.getAttribute('myid')

  axios
    .get(`http://api-breakingnews-web.itheima.net/my/article/delete/${myid}`, {
      headers: {
        Authorization: localStorage.getItem('token'),
      },
    })
    .then(res => {
      console.log('删除文章id:', res.data)
      load()
    })
})
